<template>
  <div class="my_left">
    <div class="path">
      当前位置：
      <span>首页</span>
      <span>--</span>
      <span class="location">{{ path }}</span>
    </div>
    <div class="ranking">
      <div class="ranking_title">点击排行</div>
      <ul>
        <li
          v-for="(item, index) in ranking"
          :key="item._id"
          @click="handlerarticle(item._id)"
        >
          <span class="sort" :class="index <= 2 ? 'active' : ''">{{
            index + 1
          }}</span>
          <span class="title">{{ item.title }}</span>
          <span class="views">{{ item.views }}</span>
        </li>
      </ul>
    </div>
    <div class="category" v-show="showCategory">
      <div class="category_title">分类推荐</div>
      <ul v-if="getCategoryArticle.length">
        <li
          v-for="(item, index) in getCategoryArticle"
          :key="item._id"
          @click="handlerarticle(item._id)"
        >
          <span class="sort" :class="index <= 2 ? 'active' : ''">{{
            index + 1
          }}</span>
          <span class="title">{{ item.title }}</span>
          <span class="views">{{ item.views }}</span>
        </li>
      </ul>
      <ul v-else>
        <li>
          <div>暂无同分类文章</div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import request from "../../../api/request"

import { mapGetters } from "vuex"
export default {
  data() {
    return {
      ranking: [],
      showCategory: false,
      path: "",
    }
  },
  created() {
    this.getData()
    this.checkPath()
  },
  computed: {
    ...mapGetters(["getCategoryArticle", "getPath"]),
  },
  watch: {
    getPath() {
      this.checkPath()
    },
  },
  methods: {
    // pc端根据页码加载数据
    async getData(page) {
      const { count, data } = await request({
        url: "/article/obtain",
        data: {
          page: 1,
          limit: 7,
          sort: 0,
        },
        method: "get",
      })
      this.ranking = []
      this.ranking.push(...data)
    },
    handlerarticle(id) {
      this.keyword = ""
      this.$router.push({ name: "article", query: { id } })
    },
    checkPath() {
      if (this.getPath.includes("article")) {
        this.showCategory = true
        this.path = "文章详情"
      } else if (this.getPath.includes("message")) {
        this.showCategory = false
        this.path = "留言"
      } else {
        this.showCategory = false
        this.path = "归档"
      }
    },
  },
}
</script>
<style lang="scss" scoped>
@import "../../../scss/common.scss";
.my_left {
  width: 100%;
  padding-right: 15px;
  box-sizing: border-box;
  //   background: white;
  .path {
    height: 40px;
    line-height: 40px;
    background: white;
    // font-weight: bold;
    text-indent: 10px;
    span {
      padding-right: 5px;
    }
    .location {
      color: $ar_color;
    }
  }
  .ranking {
    margin-top: 20px;
    padding-bottom: 10px;
    width: 100%;
    background: white;
  }
  .category {
    margin-top: 20px;
    padding-bottom: 10px;
    width: 100%;
    background: white;
  }
  .ranking_title,
  .category_title {
    // background: #3ebcca;
    background: $ar_color;
    height: 40px;
    line-height: 40px;
    color: white;
    font-weight: bold;
    text-indent: 10px;
  }
  ul {
    li {
      height: 30px;
      line-height: 30px;
      list-style: none;
      display: flex;
      padding: 0px 10px;
      span {
        display: inline-block;
        font-size: 15px;
      }
      .sort {
        width: 25px;
      }
      .title {
        width: calc(100% - 75px);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .views {
        width: 50px;
        text-align: right;
      }
    }
    li:hover {
      cursor: pointer;
    }
    li:hover span {
      color: #c20c0c;
    }
  }
}
.active {
  color: #a80909;
  font-size: 18px !important;
  font-weight: bold;
  font-style: italic;
}
</style>
